<template>
    <div id="app">
        <div class="break" style="margin-bottom:20px;">
            <t-breadcrumb :max-item-width="'150'">
                <t-breadcrumbItem to="/vue-next/components/menu">店铺管理</t-breadcrumbItem>
                <t-breadcrumbItem @click="$router.push('shorelist')">店铺列表</t-breadcrumbItem>
                <t-breadcrumbItem>店铺详情</t-breadcrumbItem>
            </t-breadcrumb>
        </div>
        <div class="header-content">
            <detail-shop-name :shopInfo="shopInfo"></detail-shop-name>
            <store-admian :admins="admins" :shopid="shopInfo?.id"></store-admian>
        </div>
        <div class="foodlist">
            <detail-shop-foods :foodlist="shoplist"></detail-shop-foods>
        </div>
        <div class="foot-echart">
            <detail-bin :binData="binData"></detail-bin>
        </div>
        <!-- <div class="foot-echart">
            <div id="main" ref="chartDom"></div>
        </div> -->
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref } from "@vue/reactivity";
import { computed, onMounted, provide, watch } from "@vue/runtime-core";
import { useRoute } from 'vue-router';
import { getStoreDetailData } from '@/http/modules/store'
import detailShopName from './store-detail/detail-shop-name.vue'
import detailShopFoods from './store-detail/detail-shop-foods.vue'
import detailBin from './store-detail/detail-bin.vue'
import storeAdmian from './store-detail/store-admin.vue'
import mitt from '@/utils/mitt/index'
import useShopInfo from '@/store/modules/shopInfo.js';
const getShopInfo = useShopInfo();

const route = useRoute();
const nowShopID = route.query.id;
const shopInfo = ref();
var chartDom = ref();
var chartDom2 = ref();
mitt.on('updateFood', function () {
    getStoreDetailData(nowShopID).then(res => {
        shopInfo.value = res
    })
})
mitt.on('searchFood', function (search) {
    getStoreDetailData(nowShopID, search).then(res => {
        shopInfo.value = res
    })
})
getStoreDetailData(nowShopID).then(res => {
    shopInfo.value = res
    getShopInfo.shopInfo = res
})

const shoplist = computed(() => {
    return shopInfo?.value?.shoplist
})

const admins = computed(() => {
    return shopInfo?.value?.admins
})

const totalprice = computed(() => {
    return shopInfo?.value?.orderlist?.map(n => n.totalprice)
})

const createtime = computed(() => {
    return shopInfo?.value?.orderlist?.map(n => n.createtime)
})

const binData = computed(() => {
    return shopInfo?.value?.sellTop
})
// onMounted(() => {
//     console.log(chartDom.value);
//     watch(createtime, () => {
//         var option
//         var myChart
//         console.log(totalprice, createtime)
//         myChart = echarts.init(chartDom.value);
//         option = {
//             title: {
//                 text: '近日营业额',
//                 textStyle: {
//                     //文字颜色
//                     color: 'rgb(84,112,198)',
//                     //字体风格,'normal','italic','oblique'
//                     fontStyle: 'normal',
//                     //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
//                     fontWeight: 'bold',
//                     //字体系列
//                     fontFamily: 'sans-serif',
//                     //字体大小
//                     fontSize: 18
//                 }
//             },
//             xAxis: {
//                 data: createtime.value
//             },
//             yAxis: {},
//             series: [
//                 {
//                     data: totalprice.value,
//                     type: 'line',
//                     areaStyle: {}
//                 }

//             ]
//         };
//         option && myChart.setOption(option);
//     })
// })

const xuanran = (chartDom) => {

}
</script>
 
<style lang="less" scoped>
.header-content {
    display: flex;

    .info {
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px 20px 10px 20px;
        width: 42vw;
        background-color: rgba(255, 255, 255, 0.2);
        color: rgb(146, 154, 166);
        margin-right: 2vw;
        font-family: "微软雅黑";
    }


    #main {
        padding: 20px 20px 0 20px;
        color: antiquewhite;
        border-radius: 10px;
        flex: 1;
        height: 55vh;
        background-color: rgba(255, 255, 255, 0.2);
        transition: all 1s;

        &:hover {
            box-shadow: 1px 1px 20px 5px rgba(84, 112, 198, 0.5);
        }
    }



}

.foot-echart {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;

    #main {
        margin-left: 10px;
        padding: 20px 20px 0 20px;
        color: antiquewhite;
        border-radius: 10px;
        flex: 1;
        height: 55vh;
        background-color: rgba(255, 255, 255, 0.2);
        transition: all 1s;

        &:hover {
            transform: scale(1.05);
            box-shadow: 1px 1px 20px 5px rgba(84, 112, 198, 0.5);
        }
    }
}



.foodlist {
    margin-top: 20px;
}
</style>